<template>
    <div>

        <ACarousel class="swiper" autoplay :autoplaySpeed='4000' >
            <img class="swiperItem" @click="todetail(201616060301)"
                 src="../../assets/demo/swiper1.jpg" alt="">
            <img class="swiperItem" @click="todetail(201616060302)"
                 src="../../assets/demo/swiper2.jpg" alt="">
            <img class="swiperItem" @click="todetail(201616060301)"
                 src="../../assets/demo/swiper1.jpg" alt="">
            <img class="swiperItem" @click="todetail(201616060302)"
                 src="../../assets/demo/swiper2.jpg" alt="">
        </ACarousel>

        <!--    特惠好货字体样式-->
        <div class="thhhText">
            <div class="line"></div>
            <p class="thhh">特惠好货</p>
            <div class="line"></div>
        </div>


        <!--    横向滑动条-->
        <div class="scrollX" style="width: 100%;overflow: auto">

            <mainXScrollItem ID='201616060302'
                             @click="todetail(201616060302)"
                             title="美艳纯红礼服连衣裙"
                             price="138"
                             orprice="158"
                             imgSrc="http://43.226.148.67:5000/icon/2.jpg">
            </mainXScrollItem>

            <mainXScrollItem ID='201616060301'
                             @click="todetail(201616060301)"
                             title="小镇珊珊毛织上衣"
                             price="138"
                             orprice="666"
                             imgSrc="http://43.226.148.67:5000/icon/1.jpg">
            </mainXScrollItem>

            <mainXScrollItem ID='201616060303'
                             @click="todetail(201616060303)"
                             title="Intel酷睿i9游戏水冷主机"
                             price="8399"
                             orprice="10500"
                             imgSrc="http://43.226.148.67:5000/icon/3.jpg">
            </mainXScrollItem>

            <mainXScrollItem ID='201616060304'
                             @click="todetail(201616060304)"
                             title="汤臣倍健蛋白粉"
                             price="308"
                             orprice="338"
                             imgSrc="http://43.226.148.67:5000/icon/4.jpg">
            </mainXScrollItem>

            <mainXScrollItem ID='201616060302'
                             @click="todetail(201616060302)"
                             title="美艳纯红礼服连衣裙"
                             price="138"
                             orprice="158"
                             imgSrc="http://43.226.148.67:5000/icon/2.jpg">
            </mainXScrollItem>

            <mainXScrollItem ID='201616060303'
                             @click="todetail(201616060303)"
                             title="Intel酷睿i9游戏水冷主机"
                             price="8399"
                             orprice="10500"
                             imgSrc="http://43.226.148.67:5000/icon/3.jpg">
            </mainXScrollItem>


        </div>

        <!--    Tab标签页-->
        <van-tabs sticky animated swipeable :border="false">


            <van-tab class="tab" title="超市精选">
                <mainYScrollItem ID='201616060301'
                                 @click="todetail(201616060301)"
                                 title="小镇珊珊毛织上衣"
                                 price="138"
                                 orprice="666"
                                 imgSrc="http://43.226.148.67:5000/icon/1.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060302'
                                 @click="todetail(201616060302)"
                                 title="美艳纯红礼服连衣裙"
                                 price="138"
                                 orprice="158"
                                 imgSrc="http://43.226.148.67:5000/icon/2.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060303'
                                 @click="todetail(201616060303)"
                                 title="Intel酷睿i9游戏水冷主机"
                                 price="8399"
                                 orprice="10500"
                                 imgSrc="http://43.226.148.67:5000/icon/3.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060304'
                                 @click="todetail(201616060304)"
                                 title="汤臣倍健蛋白粉"
                                 price="308"
                                 orprice="338"
                                 imgSrc="http://43.226.148.67:5000/icon/4.jpg">
                </mainYScrollItem>
            </van-tab>


            <van-tab class="tab" title="宠物生活">
                <mainYScrollItem ID='201616060301'
                                 @click="todetail(201616060301)"
                                 title="小镇珊珊毛织上衣"
                                 price="138"
                                 orprice="666"
                                 imgSrc="http://43.226.148.67:5000/icon/1.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060302'
                                 @click="todetail(201616060302)"
                                 title="美艳纯红礼服连衣裙"
                                 price="138"
                                 orprice="158"
                                 imgSrc="http://43.226.148.67:5000/icon/2.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060304'
                                 @click="todetail(201616060304)"
                                 title="汤臣倍健蛋白粉"
                                 price="308"
                                 orprice="338"
                                 imgSrc="http://43.226.148.67:5000/icon/4.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060303'
                                 @click="todetail(201616060303)"
                                 title="Intel酷睿i9游戏水冷主机"
                                 price="8399"
                                 orprice="10500"
                                 imgSrc="http://43.226.148.67:5000/icon/3.jpg">
                </mainYScrollItem>
            </van-tab>


            <van-tab class="tab" title="家具日用">
                <mainYScrollItem ID='201616060301'
                                 @click="todetail(201616060301)"
                                 title="小镇珊珊毛织上衣"
                                 price="138"
                                 orprice="666"
                                 imgSrc="http://43.226.148.67:5000/icon/1.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060302'
                                 @click="todetail(201616060302)"
                                 title="美艳纯红礼服连衣裙"
                                 price="138"
                                 orprice="158"
                                 imgSrc="http://43.226.148.67:5000/icon/2.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060303'
                                 @click="todetail(201616060303)"
                                 title="Intel酷睿i9游戏水冷主机"
                                 price="8399"
                                 orprice="10500"
                                 imgSrc="http://43.226.148.67:5000/icon/3.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060304'
                                 @click="todetail(201616060304)"
                                 title="汤臣倍健蛋白粉"
                                 price="308"
                                 orprice="338"
                                 imgSrc="http://43.226.148.67:5000/icon/4.jpg">
                </mainYScrollItem>
            </van-tab>


            <van-tab class="tab" title="时令生鲜">
                <mainYScrollItem ID='201616060301'
                                 @click="todetail(201616060301)"
                                 title="小镇珊珊毛织上衣"
                                 price="138"
                                 orprice="666"
                                 imgSrc="http://43.226.148.67:5000/icon/1.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060302'
                                 @click="todetail(201616060302)"
                                 title="美艳纯红礼服连衣裙"
                                 price="138"
                                 orprice="158"
                                 imgSrc="http://43.226.148.67:5000/icon/2.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060304'
                                 @click="todetail(201616060304)"
                                 title="汤臣倍健蛋白粉"
                                 price="308"
                                 orprice="338"
                                 imgSrc="http://43.226.148.67:5000/icon/4.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060303'
                                 @click="todetail(201616060303)"
                                 title="Intel酷睿i9游戏水冷主机"
                                 price="8399"
                                 orprice="10500"
                                 imgSrc="http://43.226.148.67:5000/icon/3.jpg">
                </mainYScrollItem>
            </van-tab>


            <van-tab class="tab" title="中外名酒">
                <mainYScrollItem ID='201616060301'
                                 @click="todetail(201616060301)"
                                 title="小镇珊珊毛织上衣"
                                 price="138"
                                 orprice="666"
                                 imgSrc="http://43.226.148.67:5000/icon/1.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060302'
                                 @click="todetail(201616060302)"
                                 title="美艳纯红礼服连衣裙"
                                 price="138"
                                 orprice="158"
                                 imgSrc="http://43.226.148.67:5000/icon/2.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060303'
                                 @click="todetail(201616060303)"
                                 title="Intel酷睿i9游戏水冷主机"
                                 price="8399"
                                 orprice="10500"
                                 imgSrc="http://43.226.148.67:5000/icon/3.jpg">
                </mainYScrollItem>

                <mainYScrollItem ID='201616060304'
                                 @click="todetail(201616060304)"
                                 title="汤臣倍健蛋白粉"
                                 price="308"
                                 orprice="338"
                                 imgSrc="http://43.226.148.67:5000/icon/4.jpg">
                </mainYScrollItem>
            </van-tab>
        </van-tabs>

        <div style="width: 100%;height: 50px"> </div>


    </div>
</template>

<script>
    import mainXScrollItem from "../../components/mainXScrollItem/mainXScrollItem";
    import mainYScrollItem from "../../components/mainYScrollItem/mainYScrollItem";

    import Vue from 'vue';
    import {Tab, Tabs} from 'vant';

    Vue.use(Tab);
    Vue.use(Tabs);

    import ACarousel from 'ant-design-vue/es/carousel';

    export default {

        data() {
            return {
                background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
                indicatorDots: true,
                vertical: false,
                autoplay: false,
                interval: 2000,
                duration: 500
            }
        },
        methods:{
            todetail(ID) {
                console.log('点击了滚动图', ID);
                this.$router.push('/pages/details/main?ID=' + ID);
            }
        },
        components: {
            mainXScrollItem,
            mainYScrollItem,
            ACarousel,
        }


    }
</script>

<style>

    .swiper {
        width: 95%;
        height: 38vw;
        background-color: burlywood;
        position: relative;
        margin-top: 10px;
        left: 2.5%;
        border-radius: 15px 5px 50px 5px;
        overflow: hidden;
    }

    .swiperItem {
        width: 100%;
        height: 38vw;
    }

    .thhhText {
        width: 100%;
        height: 35px;
        /*background-color: aquamarine;*/
        padding-top: 15px;
        display: flex;
        justify-content: center;
    }

    .line {
        width: 25px;
        height: 10px;
        border-radius: 10px;
        display: inline-block;
        background-color: #FE785A;
        margin: 5px;
    }

    .thhh {
        display: inline-block;
        font-size: 20px;
        position: relative;
        top: -5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .scrollX {
        margin-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        height: 200px;
        /*background-color: #c7c7c7;*/
        white-space: nowrap;
    }

    .tab {
        text-align: center;
    }
</style>
